@import '../variables.less';

@import 'includes/product-switcher.less';

.results {
  ol {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      border-bottom: 1px solid @borderLightGrey;

      > a {
        color: @textGrey;
        display: block;
        padding: 10px 16px;

        b {
          background: @mobileFormBackground;
        }

        .title {
          display: block;
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
  }

  .filter-bar {
    background: @mobileNavBackground url('../../img/grain.png');
    padding: 10px 16px;

    h2 {
      color: #fff;
      font-size: 16px;
      margin: 0;
      padding: 0;
    }
  }

  .search-bar {
    background: @mobileFormBackground;
    box-sizing: border-box;
    height: 36px;
    padding: 5px 16px;
    position: fixed;
    top: 51px;
    width: 100%;
    z-index: 12;

    button {
      background: transparent;
      border: 0;
      float: right;
      font-weight: bold;
      line-height: 26px;
      padding: 0;
      text-align: right;
      width: 80px;
    }

    input {
      border: 1px solid #666;
      box-sizing: border-box;
      float: left;
      height: 26px;
      width: calc(~"100% - 80px");
    }
  }

  .search-filters {
    background: @mobileSubheaderBackground;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.75);
    height: 24px;
    padding: 5px 0;
    position: fixed;
    top: 87px;
    width: 100%;
    z-index: 10;

    ul {
      list-style: none;
      margin: 0;
      padding: 0 16px;

      li {
        background: url('../../img/mobile/search-sprite.png') -23px -25px no-repeat;
        box-sizing: border-box;
        float: left;
        height: 24px;
        opacity: 0.5;
        padding-left: 34px;
        width: 50%;

        &:last-of-type {
          background-position: -23px -99px;
        }

        &.enabled {
          opacity: 1;
        }

        > a {
          color: #0A84FF;
          display: block;
          line-height: 24px;
        }
      }
    }
  }

  > .wrapper {
    top: 121px;
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .results {
    .search-filters {
      li {
        background-image: url('../../img/mobile/search-sprite-2x.png');
        background-size: 74px 148px;
      }
    }
  }
}
